/*GLOBALS*/
*{margin:0; padding:0; list-style:none;}



#wrapper{
	width:330px;
	/*margin:50px auto;*/
	height:400px;
	position:relative;
	color:#fff;	
  border: 1px solid #D6D4CD;
}

#slider-wrap{
  	width:330px;
	height:400px;
	position:relative;
	overflow:hidden;
}

#slider-wrap ul#slider{
	width:100%;
	height:100%;	
	position:absolute;
	top:0;
	left:0;		
}

#slider-wrap ul#slider li{
	float:left;
	position:relative;
	width:330px;
	height:400px;	
  cursor: pointer;
}


#slider-wrap ul#slider li > div{
	float: left;
  width: 110px;
  height: 125px;
  color: #323232;
  font-size: 14px;
  text-align: center
}
#slider-wrap ul#slider li > div:hover{
  background-color: #F0F0F0;
}
#slider-wrap ul#slider li > div.active{
  background-color: #F0F0F0;
}
#slider-wrap ul#slider li  div img {
  margin-top: 25px;
  margin-bottom: 20px;
}
/*bar*/
#pagination-wrap{
	position: absolute;
	bottom: 10px;
	right: 6px;
	height:15px;
}

#pagination-wrap ul {
	width:100%;
}

#pagination-wrap ul li{
	margin: 0 4px;
	display: inline-block;
	width:20px;
	height:20px;
	text-align: center;
	line-height: 20px;
	font-weight: bold;
	border-radius:50%;
	background:rgb(255, 187, 124);
	position:relative;
	cursor: pointer;
	color: white;
}

#pagination-wrap ul li.active{
	background:rgb(250, 144, 44);
	box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;
}




/*Header*/
h1, h2{text-shadow:none; text-align:center;}
h1{	color: #666; text-transform:uppercase;	font-size:36px;}
h2{ color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size:18px; margin-bottom:30px;} 




/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
	-webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	transition: all 0.3s cubic-bezier(1,.01,.32,1);	
}

#slider div.typeLiActive{background-color: #F0F0F0;}